<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Strelitzia-后台管理系统-账号管理</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/css/style.min.css" rel="stylesheet">
    <style>
        .mark {
            display: none;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: 200;
            background-color: rgba(0, 0, 0, 0.6);
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">

            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href="/index"><img src="/images/logo-sidebar.png" title="LightYear" alt="LightYear"/></a>
            </div>
            <div class="lyear-layout-sidebar-scroll">

                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item"><a href="/index"><i class="mdi mdi-home"></i> 后台首页</a></li>
                        <li class="nav-item active"><a href="/account/1"><i class="mdi mdi-account-box"></i>账号管理</a></li>
                        <li class="nav-item"><a href="/dynamic/1"><i class="mdi mdi-share-variant"></i>动态管理</a></li>
                        <li class="nav-item"><a href="/photo"><i class="mdi mdi-image-filter"></i>照片列表</a></li>
                        <li class="nav-item"><a href="/notification"><i class="mdi mdi-message-text-outline"></i>发布通知</a></li>

                    </ul>
                </nav>
            </div>

        </aside>
        <!--End 左侧导航-->

        <!--头部信息-->
        <header class="lyear-layout-header">
            <nav class="navbar navbar-default">
                <div class="topbar">
                    <div class="topbar-left">
                        <div class="lyear-aside-toggler">
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> 账号管理 </span>
                    </div>
                </div>
            </nav>
        </header>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">
                                <form class="pull-right search-bar" method="get" action="/account/search" role="form">
                                    <div class="input-group">

                                        <input type="text" class="form-control" value="" name="keyword"
                                               placeholder="请输入用户名或邮箱">
                                        <div class="input-group-btn">
                                            <button class="btn btn-primary" id="search-btn" type="submit">
                                                搜索
                                            </button>
                                        </div>
                                    </div>
                                </form>
                                <div class="toolbar-btn-action">
                                    <!--                                    <a id="new" class="btn btn-primary m-r-5" href="javascript:void(0)"><i  class="mdi mdi-plus"></i> 新增</a>-->
                                    <!--                  <a class="btn btn-danger" href="#!"><i class="mdi mdi-window-close"></i> 删除</a>-->
                                </div>
                            </div>
                            <div class="card-body">

                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th>编号</th>
                                            <th>用户名</th>
                                            <th>昵称</th>
                                            <th>邮箱</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="item : ${users.records}">
                                            <th scope="row" th:text="${itemStat.count}">1</th>
                                            <td th:text="${item.username}">钦差大臣</td>
                                            <td th:text="${item.nickname}">果戈理</td>
                                            <td th:text="${item.email}">俄国</td>
                                            <td th:if="${item.status == 0}"><font class="text-info">新用户</font></td>
                                            <td th:if="${item.status == 1}"><font class="text-success">登录</font></td>
                                            <td th:if="${item.status == 2}"><font class="text-warning">退出</font></td>
                                            <td>
                                                <div class="btn-group">
                                                    <a class="btn btn-xs btn-default edit" href="javascript:void(0)">
                                                        <i class="mdi mdi-pencil"></i></a>
                                                    <a class="btn btn-xs btn-default" th:href="'/account/del/'+${item.id}">
                                                        <i class="mdi mdi-window-close"></i></a>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <ul class="pagination">
                                    <li th:class="${users.hasPrevious()?'':'disabled'}">
                                        <a th:if="${users.hasPrevious()}" th:href="'/account/'+${page - 1}">«</a>
                                        <a th:unless="${users.hasPrevious()}" href="javascript:void(0)">«</a>
                                    </li>
                                    <li th:each="i: ${#numbers.sequence(1, users.pages)}"
                                        th:class="${page==i?'active':''}"><a th:href="'/account/'+${i}"
                                                                             th:text="${i}">2</a></li>
                                    <li th:class="${users.hasNext()?'':'disabled'}">
                                        <a th:if="${users.hasNext()}" th:href="'/account/'+${page + 1}">»</a>
                                        <a th:unless="${users.hasNext()}" href="javascript:void(0)">»</a>
                                    </li>
                                </ul>

                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<div id="mark" class="mark">
    <div style="width: 400px">
        <div class="card">
            <div class="card-header"><h4>修改</h4></div>
            <div class="card-body">

                <form th:action="'/account/'+${page}" method="post">
                    <input name="id" type="hidden">
                    <div class="form-group">
                        <label for="example-nf-email">用户名</label>
                        <input class="form-control" name="username"
                               placeholder="请输入用户名.." readonly="readonly">
                    </div>
                    <div class="form-group">
                        <label for="example-nf-email">邮箱</label>
                        <input class="form-control" type="email" id="example-nf-email" name="email"
                               placeholder="请输入邮箱..">
                    </div>
                    <div class="form-group">
                        <label for="example-nf-password">昵称</label>
                        <input class="form-control" type="text" name="nickname"
                               placeholder="请输入昵称..">
                    </div>
                    <div class="form-group">
                        <label for="example-nf-password">密码</label>
                        <input class="form-control" type="text" id="example-nf-password" name="password"
                               placeholder="请输入密码..">
                    </div>


                    <div class="form-group">
                        <label for="example-nf-password">状态</label>

                        <label class="lyear-radio radio-inline radio-info" style="margin-left: 10px">
                            <input type="radio" name="status" value="0" checked="checked"><span>新注册</span>
                        </label>
                        <label class="lyear-radio radio-inline radio-success">
                            <input type="radio" name="status" value="1"><span>登录</span>
                        </label>
                        <label class="lyear-radio radio-inline radio-warning">
                            <input type="radio" name="status" value="2"><span>退出</span>
                        </label>

                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary" type="submit">确认</button>
                        <button type="button" id="cancel" class="btn btn-default">取消</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/js/main.min.js"></script>
<script type="text/javascript">
    // $(function () {
    //     $('.search-bar .dropdown-menu a').click(function () {
    //         var field = $(this).data('field') || '';
    //         $('#search-field').val(field);
    //         $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
    //     });
    // });
    let users = '[[${users.records}]]'
    users = JSON.parse(users.replaceAll('&quot;', '\"'))
    $('.edit').on('click', function () {
        // 获取当前元素的class
        var currentClass = $(this).attr('class');

        // 获取所有class相同的元素列表
        var sameClassElements = $('.edit').filter(function () {
            return $(this).attr('class') === currentClass;
        });

        // 获取当前元素在元素列表中的索引
        var currentIndex = sameClassElements.index($(this));

        console.log(currentIndex);
        $('#mark').css("display", "flex");
        // let users = '[[${users.records}]]'
        // users = JSON.parse(users.replaceAll('&quot;','\"'))

        $('[name="username"]').val(users[currentIndex].username)
        $('[name="id"]').val(users[currentIndex].id)
        $('[name="email"]').val(users[currentIndex].email)
        $('[name="nickname"]').val(users[currentIndex].nickname)
        $('[name="status"]').eq(users[currentIndex].status).prop('checked', true);

    })

    $('#cancel').on('click', () => {
        $('#mark').css("display", "none");
    })
</script>
</body>
</html>